<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="choose-sign flex w100">
		<text class="title">选择参赛名片</text>
		<view class="choose-content W100">
			<scroll-view scroll-y="true" style="height: 100%;width: 100%;">
				<template v-if="signlist.length>0">
					<view class="sign-item flex-row-center W100" v-for="(item,index) in signlist" :key="item.id"
						@click="changeSignId(item.id)">
						<view class="personnel-left">
							<view class="radio-box-active flex-center" v-if="signInfo.signId==item.id">
								<up-icon name="checkbox-mark" color="#0A534F" size="28rpx"></up-icon>
							</view>
							<view class="radio-box" v-else></view>
						</view>
						<view class="personnel-right">
							<view class="personnel-head flex-row-center">
								<view class="name-box flex-row-center">
									<text class="name">{{item.real_name}}</text>
									<template>
										<up-icon name="man" v-if="item.gender==1" color="#2979ff"
											size="28rpx"></up-icon>
										<up-icon name="woman" v-if="item.gender==2" color="#F8BBC4"
											size="28rpx"></up-icon>
									</template>
								</view>
								<view class="status-box flex-center" v-if="item.default">
									<text class="TEXT">默认</text>
								</view>
							</view>
							<text class="phone" v-if="item.newMobile">联系方式：{{item.newMobile}}</text>
							<text class="phone" v-else>联系方式：{{item.mobile}}</text>
						</view>
					</view>
				</template>
				<view class="not-list-view" v-else>
					<text class="text">暂未添加名片~</text>
				</view>
				<view class="add_box flex-center" @click="addSign">
					<up-icon name="plus" color="#7CDEC7" size="24rpx"></up-icon>
					<text class="text">新增名片</text>
				</view>
			</scroll-view>
		</view>
		<!-- 优惠券 -->
		<view class="w100">
			<chooseCoupon :useCost="signInfo.cost" :detail="2" @changeCouponItem="changeCoupon"></chooseCoupon>
		</view>
		<view class="choseSign-footer w100 flex-row-center" v-if="props.signShow">
			<choosePayVue :payType="signInfo.payType" @changePayType="changePayType" style="width: 100%;">
			</choosePayVue>
			<view class="agreement-box flex-center">
				<up-checkbox labelColor="#999999" shape="circle" size="30rpx" labelSize="24rpx" label="已阅读并同意签署"
					activeColor="#8BDEB7" @change="changeChecked" name="agree" :checked="checked">
				</up-checkbox>
				<view class="content flex-row-center">
					<text class="agreement-name" @click="toProtocol(5)">《赛事协议》</text>
				</view>
			</view>
			<view class="choseSign-footer-btn w100 flex-center">
				<!-- 	<view class="add_box flex-center" @click="addSign">
					<up-icon name="plus" color="#7CDEC7" size="28rpx"></up-icon>
					<text class="text">新增名片</text>
				</view> -->
				<up-button :text="payBtntext" @click="submitSgin" loadingText="提交中"
					:customStyle="{'color':'#115B56',height:'68rpx',width:'480rpx',margin:'0'}"
					:loading="signInfo.loading" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"
					shape="circle"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import choosePayVue from '@/components/choosePay/choosePay.vue';
	import {
		maskPhoneNumber
	} from '@/utils/utools';
	import {
		usePay
	} from '@/hooks/usePay.js';
	import {
		matchInfoStore
	} from '@/stores/match';
	import {
		matchNotification
	} from '@/utils/matchNotification';
	const {
		appPay
	} = usePay();
	const matchStore = matchInfoStore();
	const matchInfo = computed(() => matchStore.matchInfo);
	const props = defineProps({
		signShow: {
			default: false
		},
		matchId: {
			default: 0
		}
	})
	const emit = defineEmits(['checkedSign']);
	const checked = ref(false);
	const orderInfo = ref(null);
	const signInfo = reactive({
		signId: 0,
		loading: false,
		payType: "wechat",
		signature: '', //签名地址
		couponId: 0
	});
	const payBtntext = ref('报名（￥199.99）')
	const signlist = ref([]);
	onMounted(() => {
		uni.$on('addSign', (data) => { //添加名片
			if (data.type) {
				getSignList();
			}
		});
		uni.$on('addSignature', (data) => { //添加签名
			if (data.type && data.src) {
				console.log('addSignature', data.src);
				signInfo.signature = data.src;
				submitSign(data.src);
			}
		});
	});
	onUnload(() => {
		uni.$off('addSign');
		uni.$off('addSignature');
	})
	const confirmGameTime = (e) => {
		if (e.value) {
			arriveTime.value = formatDate(e.value, 'yyyy-MM-dd hh:mm');
			timeShow.value = false;
		}
	}
	const changeChecked = (e) => {
		if (!matchInfo.value?.agreement) {
			uni.$u.toast('请先阅读并签署协议');
			setTimeout(() => {
				toProtocol(5)
			}, 800)
			checked.value = false;
			return
		}
		checked.value = e;
	}
	const changeSignId = (id) => { //切换组队名片
		signInfo.signId = id;
	};
	const getSignList = async () => { //获取名片列表
		const res = await $Api.user.getSignList();
		if (res.code == 1) {
			res.data.list = res.data.list.map(val => {
				if (val.default === 1) { //保存默认的id，默认选中
					signInfo.signId = val.id;
				}
				if (val.mobile) {
					val.newMobile = maskPhoneNumber(val.mobile);
				}
				return val
			})
			signlist.value = res.data.list;
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changePayType = (item) => { //切换支付方式
		signInfo.payType = item;
	}
	const submitSign = async () => { //提交签名
		const ress = await $Api.match.protocolSign({
			url: signInfo.signature,
			match_id: props.matchId,
		}, true);
		if (ress.code == 1) {
			matchInfo.value.agreement = true;
			checked.value = true;
			uni.showToast({
				title: '上传成功',
				icon: 'success'
			});
		} else {
			uni.$u.toast(ress.msg);
			return
		}
	}
	const submitSgin = async () => { //提交表单
		if (!matchInfo.value?.agreement) {
			uni.$u.toast('请先阅读并签署协议');
			setTimeout(() => {
				toProtocol(5)
			}, 800)
			return
		}
		if (signInfo.loading) return;
		if (!checked.value) {
			uni.$u.toast('请先阅读并勾选协议');
			return
		}
		if (!signInfo.signId) {
			uni.$u.toast('请选择参赛人员');
			return
		}
		signInfo.loading = true;
		const res = await $Api.order.submitOrder({
			type: 'wechat',
			method: 'miniapp',
			relationId: props.matchId,
			isBalance: signInfo.payType === 'balance' ? 1 : 0,
			signId: signInfo.signId,
			relationType: 'Match',
			orderId: orderInfo.value?.id || 0,
			userCouponId: signInfo.couponId || 0
		})
		if (res.code == 1) {
			const {
				data
			} = res;
			if (data.order) {
				data.order.time_expire = formatDate(data.order.time_expire);
				orderInfo.value = data.order;
				// console.log('orderInfo.value', orderInfo.value);
			}
			if (signInfo.payType === 'balance') { //余额支付
				uni.showToast({
					title: '支付成功'
				});
				setTimeout(() => {
					emit('checkedSign', {
						type: 1
					})
				}, 600);

			} else { //微信支付
				appPay({
					provider: 'wxpay',
					timeStamp: data.pre_payment.timeStamp,
					nonceStr: data.pre_payment.nonceStr,
					package: data.pre_payment.package,
					signType: data.pre_payment.signType,
					paySign: data.pre_payment.paySign,
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '支付成功'
						});
						matchNotification(() => {
							setTimeout(() => {
								emit('checkedSign', {
									type: 1
								})
							}, 600);
						})

						// groupNotification(() => {
						// 	setTimeout(() => {
						// 		signInfo.loading = false;
						// 		teamShow.value = false;
						// 		groupInfo.value.ordered = 1; //组队已支付状态
						// 	}, 800);
						// }); //打开组队通知
					} else if (res.code == 100) { //取消支付
						signInfo.loading = false;
						uni.$u.toast('取消支付！');
					}
				}).catch((err) => {
					signInfo.loading = false;
					uni.$u.toast(err);
				})
			}

		} else {
			signInfo.loading = false;
			uni.$u.toast(res.msg)
		}

	}
	const changeCoupon = (id) => { //切换优惠券
		signInfo.couponId = id;
	}
	const toSign = () => { //去签名
		uni.navigateTo({
			url: '/page_activity/views/signature'
		})
	}
	const toProtocol = (type) => { //阅读协议
		uni.navigateTo({
			url: '/pages/protocol/protocol?type=' + type
		})
	}
	const addSign = () => { //添加名片
		uni.navigateTo({
			url: '/page_user/views/personnel'
		})
	}
	watch(() => props.signShow, (newVal) => {
		if (newVal) {
			getSignList()
		} else {
			signInfo.signId = 0;
		}
	});
	watch(() => matchStore.matchInfo, (newVal) => {
		if (newVal) {
			payBtntext.value = `立即报名（￥${newVal.cost}）`
		}
	});
</script>
<style>

</style>
<style lang="scss" scoped>
	.placeholderClass {
		font-weight: 500;
		font-size: 30rpx;
		color: #A5A6A7;
	}

	.submit-from-item {
		margin-bottom: 46rpx;

		.from-item-left {
			margin-right: 50rpx;

			.union {
				width: 24rpx;
				height: 22rpx;
			}

			.item-name {
				font-weight: bold;
				font-size: 30rpx;
				color: rgba(255, 255, 255, 0.8);
				line-height: 35rpx;
				text-align: justify;
				text-align-last: justify;
				width: 124rpx;
				margin-left: 10rpx;
				display: block;
			}
		}

		.time-box {
			flex: 1;
			justify-content: space-between;
		}

		.from-item-right {
			flex: 1;
			font-weight: 500;
			font-size: 30rpx;
			color: #85C69B;

			.unit {
				color: $price-color;
			}

			.tips {
				color: $description-color;
			}
		}

		.getCode-box {
			width: 176rpx;
			height: 64rpx;
			border-radius: 8rpx;
			border: 2rpx solid #68B9AE;

			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: #66B7AF;
			}
		}

		.sex-box {
			view:not(:last-child) {
				margin-right: 40rpx;
			}

			.sex-item {
				width: 112rpx;
				height: 64rpx;
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #B0B0B2;

				.sex {
					font-weight: 500;
					font-size: 30rpx;
					color: rgba(255, 255, 255, 0.8);
				}
			}

			.sex-item-avtive {
				width: 112rpx;
				height: 64rpx;
				background: linear-gradient(270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%);
				box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(108, 199, 190, 0.38);
				border-radius: 8rpx 8rpx 8rpx 8rpx;

				.sex {
					font-weight: bold;
					font-size: 30rpx;
					color: rgba(10, 83, 79, 0.8);
				}
			}
		}

	}

	.add_box {
		width: 180rpx;
		height: 42rpx;
		border-radius: 21rpx;
		border: 2rpx solid $btn-plain-color;
		margin: 0 auto;
		margin-top: 36rpx;

		.text {
			font-size: 26rpx;
			color: $btn-plain-color;
			margin-left: 12rpx;
		}
	}

	.choose-sign {
		padding: 36rpx;
		height: 80vh;
		flex-direction: column;
		flex-direction: column;
		background-color: #222528;
		border-radius: 18rpx 18rpx 0 0;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: rgba(255, 255, 255, 0.87);
			line-height: 40rpx;
		}

		.choose-content {
			flex: 1;
			margin: 24rpx 0;
			overflow: hidden;

			.sign-item {
				padding: 20rpx 0;

				&:not(:last-child) {
					border-bottom: 1rpx solid #373B3E;
				}
			}
		}

		.radio-box {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			border: 1rpx solid #ccc;
			margin-right: 18rpx;
			box-sizing: border-box;
		}

		.radio-box-active {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background-color: #7EDE9E;
			margin-right: 18rpx;
		}

		.choseSign-footer {
			flex-direction: column;
		}

		.choseSign-footer-btn {
			// justify-content: space-evenly;
			height: 72rpx;
		}



		.personnel-left {
			flex-shrink: 0;
		}

		.personnel-right {
			margin-left: 24rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.personnel-head {
			width: 100%;
			justify-content: space-between;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: $title-color;
				margin-right: 12rpx;
			}
		}

		.phone {
			color: $description-color;
			font-size: 28rpx;
			margin-top: 18rpx;
		}

		.status-box {
			width: 96rpx;
			height: 48rpx;
			border-radius: 12rpx;
			border: 1rpx solid $attention-color;
			color: $attention-color;

			.text {
				color: $attention-color;
				font-weight: bold;
				font-size: 28rpx;
			}
		}
	}

	.agreement-box {
		width: 100%;
		margin: 16rpx 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>